import React, { useEffect, useState } from 'react';
import { Button, Container, Dropdown, Image, ListGroup, ListGroupItem } from 'react-bootstrap';
import DropdownItem from 'react-bootstrap/esm/DropdownItem';
import { useLocation, useNavigate } from 'react-router';
import appSetting from '../../store/AppSetting';
import MaterialType from './MaterialType';
import moment from 'moment';

interface MaterialListProps{}
interface MaterialListState{}

const MaterialList:React.FC = (props:MaterialListProps,state:MaterialListState)=>{

    const location = useLocation();
    const [mt,setMt] = useState("image");
    const [list,setList] = useState<any>([]);

    const getSeletionName = () => {
        switch(mt){
            case "image":{
                return "图片"
            }
            case "audio":{
                return "音频"
            }
            case "video":{
                return "视频"
            }
        }
    }

    const getMaterialList = ()=> {
        const url = `/wxproxy/cgi-bin/material/batchget_material?access_token=${appSetting.accessToken}`
        fetch(url,{
            method:"POST",
            body:JSON.stringify({
                "type":mt,
                'offset':0,
                "count":20
            })
        }).then((res)=>res.json()).then((jsonResp)=>{
            console.log("recived material info:" + JSON.stringify(jsonResp));
            if(jsonResp.item){
                setList(jsonResp.item.map((itm:any)=>{
                    return {
                        ...itm,
                        update_time:moment.utc(itm.update_time).format("yyyy-MM-dd hh:mm")
                    }
                }));
            }
        })
    }

    useEffect(()=>{
        getMaterialList();
    },[])

    const onSelectOption:any = (eventKey:string,e:any)=> {
        //todo: set state
        setMt(eventKey);
        getMaterialList();
    }

    return (<Container>
        <Dropdown onSelect={onSelectOption} defaultValue={0}>
            <Dropdown.Toggle variant="success" id="dropdown-basic">
                    {getSeletionName()||'选择素材类型'}
            </Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item href="#/action-1" eventKey={'image'}>图片</Dropdown.Item>
                <Dropdown.Item href="#/action-2" eventKey={'audio'}>音频</Dropdown.Item>
                <Dropdown.Item href="#/action-3" eventKey={'video'}>视频</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
        <ListGroup>
            素材列表
            {mt === 'image' && list.map((img:any)=>{
                return (<ListGroupItem>
                    <Container style={{display:"flex",flexDirection:"row"}}>
                        <img src={`${img.url}`} style={{width:100}}/>
                        <Container style={{display:"flex",
                            flexDirection:"column",
                            boxSizing:"content-box",
                            flexWrap:"wrap",
                            'overflow':"visible"
                        }}>
                            <h5>{img.name}</h5>
                            <p style={{margin:5,overflowWrap:"break-word",
                            wordWrap:"break-word",
                            wordBreak:'break-word'}}>{img.media_id}</p>
                            <p>{img.update_time}</p>
                            <p>{img.tags}</p>
                        </Container>
                    </Container>
                </ListGroupItem>)
            })}
            {mt === 'audio' && list.map((img:any)=>{
                return (<ListGroupItem></ListGroupItem>)
            })}
            {mt === 'video' && list.map((img:any)=>{
                return (<ListGroupItem></ListGroupItem>)
            })}
        </ListGroup>
    </Container>)
}

export default MaterialList;